<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .middle {
            margin: auto;
            width: 50%;
        }
    </style>
</head>

<body>
    <center>
        <h2>
            畅销书列表
        </h2>
    </center>
    <div style="background-color: rgb(185, 175, 80);">
        <table style="margin: auto;width: 50%;width: 400px; border-collapse: separate;border-spacing: 10px 5px;">
            <tr>
                <td>
                    <img src="./images/01.gif" alt=""><br>
                    <div class="middle">
                        <input type="checkbox"><br>
                        贝壳汉姆画传
                        <br>
                        惊喜价：29.8元
                    </div>
                </td>
                <td>
                    <img src="./images/02.gif" alt=""><br>
                    <div class="middle">
                        <input type="checkbox"><br>
                        乔丹画传
                        <br>
                        惊喜价：33元
                    </div>
                </td>
                <td>
                    <img src="./images/03.gif" alt=""><br>
                    <div class="middle">
                        <input type="checkbox"><br>
                        乔琪画传
                        <br>
                        惊喜价：15.5元
                    </div>
                </td>
            </tr>
            <tr>
                <td style="width: 50%;">
                    <center>

                        <button>购买</button>
                    </center>
                </td>
                <td style="width: 50%;">
                    <center>

                        <button>重置</button>
                    </center>
                </td>
            </tr>
        </table>
    </div>
</body>

</html>